// ┌────────────────────────────────────────────────────────────────────┐ \\
// │ F R E E B O A R D                                                  │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Copyright © 2013 Jim Heising (https://github.com/jheising)         │ \\
// │ Copyright © 2013 Bug Labs, Inc. (http://buglabs.net)               │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Licensed under the MIT license.                                    │ \\
// └────────────────────────────────────────────────────────────────────┘ \\

(function () {
    var SPARKLINE_HISTORY_LENGTH = 100;
    var SPARKLINE_COLORS = ["#FF9900", "#FFFFFF", "#B3B4B4", "#6B6B6B", "#28DE28", "#13F7F9", "#E6EE18", "#C41204", "#CA3CB8", "#0B1CFB"];

    function easeTransitionText(newValue, textElement, duration) {

        var currentValue = $(textElement).text();

        if (currentValue == newValue)
            return;

        if ($.isNumeric(newValue) && $.isNumeric(currentValue)) {
            var numParts = newValue.toString().split('.');
            var endingPrecision = 0;

            if (numParts.length > 1) {
                endingPrecision = numParts[1].length;
            }

            numParts = currentValue.toString().split('.');
            var startingPrecision = 0;

            if (numParts.length > 1) {
                startingPrecision = numParts[1].length;
            }

            jQuery({
                transitionValue: Number(currentValue),
                precisionValue: startingPrecision
            }).animate({transitionValue: Number(newValue), precisionValue: endingPrecision}, {
                duration: duration,
                step: function () {
                    $(textElement).text(this.transitionValue.toFixed(this.precisionValue));
                },
                done: function () {
                    $(textElement).text(newValue);
                }
            });
        }
        else {
            $(textElement).text(newValue);
        }
    }

    function addSparklineLegend(element, legend) {
        var legendElt = $("<div class='sparkline-legend'></div>");
        for (var i = 0; i < legend.length; i++) {
            var color = SPARKLINE_COLORS[i % SPARKLINE_COLORS.length];
            var label = legend[i];
            legendElt.append("<div class='sparkline-legend-value'><span style='color:" +
                color + "'>&#9679;</span>" + label + "</div>");
        }
        element.empty().append(legendElt);

        freeboard.addStyle('.sparkline-legend', "margin:5px;");
        freeboard.addStyle('.sparkline-legend-value',
            'color:white; font:10px arial,san serif; float:left; overflow:hidden; width:50%;');
        freeboard.addStyle('.sparkline-legend-value span',
            'font-weight:bold; padding-right:5px;');
    }

    function addValueToSparkline(element, value, legend) {
        var values = $(element).data().values;
        var valueMin = $(element).data().valueMin;
        var valueMax = $(element).data().valueMax;
        if (!values) {
            values = [];
            valueMin = undefined;
            valueMax = undefined;
        }

        var collateValues = function (val, plotIndex) {
            if (!values[plotIndex]) {
                values[plotIndex] = [];
            }
            if (values[plotIndex].length >= SPARKLINE_HISTORY_LENGTH) {
                values[plotIndex].shift();
            }
            values[plotIndex].push(Number(val));

            if (valueMin === undefined || val < valueMin) {
                valueMin = val;
            }
            if (valueMax === undefined || val > valueMax) {
                valueMax = val;
            }
        }

        if (_.isArray(value)) {
            _.each(value, collateValues);
        } else {
            collateValues(value, 0);
        }
        $(element).data().values = values;
        $(element).data().valueMin = valueMin;
        $(element).data().valueMax = valueMax;

        var tooltipHTML = '<span style="color: {{color}}">&#9679;</span> {{y}}';

        var composite = false;
        _.each(values, function (valueArray, valueIndex) {
            $(element).sparkline(valueArray, {
                type: "line",
                composite: composite,
                height: "100%",
                width: "100%",
                fillColor: false,
                lineColor: SPARKLINE_COLORS[valueIndex % SPARKLINE_COLORS.length],
                lineWidth: 2,
                spotRadius: 3,
                spotColor: false,
                minSpotColor: "#78AB49",
                maxSpotColor: "#78AB49",
                highlightSpotColor: "#9D3926",
                highlightLineColor: "#9D3926",
                chartRangeMin: valueMin,
                chartRangeMax: valueMax,
                tooltipFormat: (legend && legend[valueIndex]) ? tooltipHTML + ' (' + legend[valueIndex] + ')' : tooltipHTML
            });
            composite = true;
        });
    }

    var valueStyle = freeboard.getStyleString("values");

    freeboard.addStyle('.widget-big-text', valueStyle + "font-size:75px;");

    freeboard.addStyle('.tw-display', 'width: 100%; height:100%; display:table; table-layout:fixed;');

    freeboard.addStyle('.tw-tr',
        'display:table-row;');

    freeboard.addStyle('.tw-tg',
        'display:table-row-group;');

    freeboard.addStyle('.tw-tc',
        'display:table-caption;');

    freeboard.addStyle('.tw-td',
        'display:table-cell;');

    freeboard.addStyle('.tw-value',
        valueStyle +
        'overflow: hidden;' +
        'display: inline-block;' +
        'text-overflow: ellipsis;');

    freeboard.addStyle('.tw-unit',
        'display: inline-block;' +
        'padding-left: 10px;' +
        'padding-bottom: 1.1em;' +
        'vertical-align: bottom;');

    freeboard.addStyle('.tw-value-wrapper',
        'position: relative;' +
        'vertical-align: middle;' +
        'height:100%;');

    freeboard.addStyle('.tw-sparkline',
        'height:20px;');

    var textWidget = function (settings) {

        var self = this;

        var currentSettings = settings;
        var displayElement = $('<div class="tw-display"></div>');
        var titleElement = $('<h2 class="section-title tw-title tw-td"></h2>');
        var valueElement = $('<div class="tw-value"></div>');
        var unitsElement = $('<div class="tw-unit"></div>');
        var sparklineElement = $('<div class="tw-sparkline tw-td"></div>');

        function updateValueSizing() {
            if (!_.isUndefined(currentSettings.units) && currentSettings.units != "") // If we're displaying our units
            {
                valueElement.css("max-width", (displayElement.innerWidth() - unitsElement.outerWidth(true)) + "px");
            }
            else {
                valueElement.css("max-width", "100%");
            }
        }

        this.render = function (element) {
            $(element).empty();

            $(displayElement)
                .append($('<div class="tw-tr"></div>').append(titleElement))
                .append($('<div class="tw-tr"></div>').append($('<div class="tw-value-wrapper tw-td"></div>').append(valueElement).append(unitsElement)))
                .append($('<div class="tw-tr"></div>').append(sparklineElement));

            $(element).append(displayElement);

            updateValueSizing();
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;

            var shouldDisplayTitle = (!_.isUndefined(newSettings.title) && newSettings.title != "");
            var shouldDisplayUnits = (!_.isUndefined(newSettings.units) && newSettings.units != "");

            if (newSettings.sparkline) {
                sparklineElement.attr("style", null);
            }
            else {
                delete sparklineElement.data().values;
                sparklineElement.empty();
                sparklineElement.hide();
            }

            if (shouldDisplayTitle) {
                titleElement.html((_.isUndefined(newSettings.title) ? "" : newSettings.title));
                titleElement.attr("style", null);
            }
            else {
                titleElement.empty();
                titleElement.hide();
            }

            if (shouldDisplayUnits) {
                unitsElement.html((_.isUndefined(newSettings.units) ? "" : newSettings.units));
                unitsElement.attr("style", null);
            }
            else {
                unitsElement.empty();
                unitsElement.hide();
            }

            var valueFontSize = 30;

            if (newSettings.size == "big") {
                valueFontSize = 75;

                if (newSettings.sparkline) {
                    valueFontSize = 60;
                }
            }

            valueElement.css({"font-size": valueFontSize + "px"});

            updateValueSizing();
        }

        this.onSizeChanged = function () {
            updateValueSizing();
        }

        this.onCalculatedValueChanged = function (settingName, newValue) {
            if (settingName == "value") {

                if (currentSettings.animate) {
                    easeTransitionText(newValue, valueElement, 500);
                }
                else {
                    valueElement.text(newValue);
                }

                if (currentSettings.sparkline) {
                    addValueToSparkline(sparklineElement, newValue);
                }
            }
        }

        this.onDispose = function () {

        }

        this.getHeight = function () {
            if (currentSettings.size == "big" || currentSettings.sparkline) {
                return 2;
            }
            else {
                return 1;
            }
        }

        this.onSettingsChanged(settings);
    };

    freeboard.loadWidgetPlugin({
        type_name: "text_widget",
        display_name: "Text",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "title",
                display_name: "Title",
                type: "text"
            },
            {
                name: "size",
                display_name: "Size",
                type: "option",
                options: [
                    {
                        name: "Regular",
                        value: "regular"
                    },
                    {
                        name: "Big",
                        value: "big"
                    }
                ]
            },
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            },
            {
                name: "sparkline",
                display_name: "Include Sparkline",
                type: "boolean"
            },
            {
                name: "animate",
                display_name: "Animate Value Changes",
                type: "boolean",
                default_value: true
            },
            {
                name: "units",
                display_name: "Units",
                type: "text"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new textWidget(settings));
        }
    });

    var gaugeID = 0;
    freeboard.addStyle('.gauge-widget-wrapper', "width: 100%;text-align: center;");
    freeboard.addStyle('.gauge-widget', "width:200px;height:160px;display:inline-block;");

    var gaugeWidget = function (settings) {
        var self = this;

        var thisGaugeID = "gauge-" + gaugeID++;
        var titleElement = $('<h2 class="section-title"></h2>');
        var gaugeElement = $('<div class="gauge-widget" id="' + thisGaugeID + '"></div>');

        var gaugeObject;
        var rendered = false;

        var currentSettings = settings;

        function createGauge() {
            if (!rendered) {
                return;
            }

            gaugeElement.empty();

            gaugeObject = new JustGage({
                id: thisGaugeID,
                value: (_.isUndefined(currentSettings.min_value) ? 0 : currentSettings.min_value),
                min: (_.isUndefined(currentSettings.min_value) ? 0 : currentSettings.min_value),
                max: (_.isUndefined(currentSettings.max_value) ? 0 : currentSettings.max_value),
                label: currentSettings.units,
                showInnerShadow: false,
                valueFontColor: "#d3d4d4"
            });
        }

        this.render = function (element) {
            rendered = true;
            $(element).append(titleElement).append($('<div class="gauge-widget-wrapper"></div>').append(gaugeElement));
            createGauge();
        }

        this.onSettingsChanged = function (newSettings) {
            if (newSettings.min_value != currentSettings.min_value || newSettings.max_value != currentSettings.max_value || newSettings.units != currentSettings.units) {
                currentSettings = newSettings;
                createGauge();
            }
            else {
                currentSettings = newSettings;
            }

            titleElement.html(newSettings.title);
        }

        this.onCalculatedValueChanged = function (settingName, newValue) {
            if (!_.isUndefined(gaugeObject)) {
                gaugeObject.refresh(Number(newValue));
            }
        }

        this.onDispose = function () {
        }

        this.getHeight = function () {
            return 3;
        }

        this.onSettingsChanged(settings);
    };

    freeboard.loadWidgetPlugin({
        type_name: "gauge",
        display_name: "Gauge",
        "external_scripts": [
            "plugins/thirdparty/raphael.2.1.0.min.js",
            "plugins/thirdparty/justgage.1.0.1.js"
        ],
        settings: [
            {
                name: "title",
                display_name: "Title",
                type: "text"
            },
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            },
            {
                name: "units",
                display_name: "Units",
                type: "text"
            },
            {
                name: "min_value",
                display_name: "Minimum",
                type: "text",
                default_value: 0
            },
            {
                name: "max_value",
                display_name: "Maximum",
                type: "text",
                default_value: 100
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new gaugeWidget(settings));
        }
    });


    freeboard.addStyle('.sparkline', "width:100%;height: 75px;");
    var sparklineWidget = function (settings) {
        var self = this;

        var titleElement = $('<h2 class="section-title"></h2>');
        var sparklineElement = $('<div class="sparkline"></div>');
        var sparklineLegend = $('<div></div>');
        var currentSettings = settings;

        this.render = function (element) {
            $(element).append(titleElement).append(sparklineElement).append(sparklineLegend);
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            titleElement.html((_.isUndefined(newSettings.title) ? "" : newSettings.title));

            if (newSettings.include_legend) {
                addSparklineLegend(sparklineLegend, newSettings.legend.split(","));
            }
        }

        this.onCalculatedValueChanged = function (settingName, newValue) {
            if (currentSettings.legend) {
                addValueToSparkline(sparklineElement, newValue, currentSettings.legend.split(","));
            } else {
                addValueToSparkline(sparklineElement, newValue);
            }
        }

        this.onDispose = function () {
        }

        this.getHeight = function () {
            var legendHeight = 0;
            if (currentSettings.include_legend && currentSettings.legend) {
                var legendLength = currentSettings.legend.split(",").length;
                if (legendLength > 4) {
                    legendHeight = Math.floor((legendLength - 1) / 4) * 0.5;
                } else if (legendLength) {
                    legendHeight = 0.5;
                }
            }
            return 2 + legendHeight;
        }

        this.onSettingsChanged(settings);
    };

    freeboard.loadWidgetPlugin({
        type_name: "sparkline",
        display_name: "Sparkline",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "title",
                display_name: "Title",
                type: "text"
            },
            {
                name: "value",
                display_name: "Value",
                type: "calculated",
                multi_input: "true"
            },
            {
                name: "include_legend",
                display_name: "Include Legend",
                type: "boolean"
            },
            {
                name: "legend",
                display_name: "Legend",
                type: "text",
                description: "Comma-separated for multiple sparklines"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new sparklineWidget(settings));
        }
    });

    freeboard.addStyle('div.pointer-value', "position:absolute;height:95px;margin: auto;top: 0px;bottom: 0px;width: 100%;text-align:center;");
    var pointerWidget = function (settings) {
        var self = this;
        var paper;
        var strokeWidth = 3;
        var triangle;
        var width, height;
        var currentValue = 0;
        var valueDiv = $('<div class="widget-big-text"></div>');
        var unitsDiv = $('<div></div>');

        function polygonPath(points) {
            if (!points || points.length < 2)
                return [];
            var path = []; //will use path object type
            path.push(['m', points[0], points[1]]);
            for (var i = 2; i < points.length; i += 2) {
                path.push(['l', points[i], points[i + 1]]);
            }
            path.push(['z']);
            return path;
        }

        this.render = function (element) {
            width = $(element).width();
            height = $(element).height();

            var radius = Math.min(width, height) / 2 - strokeWidth * 2;

            paper = Raphael($(element).get()[0], width, height);
            var circle = paper.circle(width / 2, height / 2, radius);
            circle.attr("stroke", "#FF9900");
            circle.attr("stroke-width", strokeWidth);

            triangle = paper.path(polygonPath([width / 2, (height / 2) - radius + strokeWidth, 15, 20, -30, 0]));
            triangle.attr("stroke-width", 0);
            triangle.attr("fill", "#fff");

            $(element).append($('<div class="pointer-value"></div>').append(valueDiv).append(unitsDiv));
        }

        this.onSettingsChanged = function (newSettings) {
            unitsDiv.html(newSettings.units);
        }

        this.onCalculatedValueChanged = function (settingName, newValue) {
            if (settingName == "direction") {
                if (!_.isUndefined(triangle)) {
                    var direction = "r";

                    var oppositeCurrent = currentValue + 180;

                    if (oppositeCurrent < newValue) {
                        //direction = "l";
                    }

                    triangle.animate({transform: "r" + newValue + "," + (width / 2) + "," + (height / 2)}, 250, "bounce");
                }

                currentValue = newValue;
            }
            else if (settingName == "value_text") {
                valueDiv.html(newValue);
            }
        }

        this.onDispose = function () {
        }

        this.getHeight = function () {
            return 4;
        }

        this.onSettingsChanged(settings);
    };

    freeboard.loadWidgetPlugin({
        type_name: "pointer",
        display_name: "Pointer",
        "external_scripts": [
            "plugins/thirdparty/raphael.2.1.0.min.js"
        ],
        settings: [
            {
                name: "direction",
                display_name: "Direction",
                type: "calculated",
                description: "In degrees"
            },
            {
                name: "value_text",
                display_name: "Value Text",
                type: "calculated"
            },
            {
                name: "units",
                display_name: "Units",
                type: "text"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new pointerWidget(settings));
        }
    });

    var pictureWidget = function (settings) {
        var self = this;
        var widgetElement;
        var timer;
        var imageURL;

        function stopTimer() {
            if (timer) {
                clearInterval(timer);
                timer = null;
            }
        }

        function updateImage() {
            if (widgetElement && imageURL) {
                var cacheBreakerURL = imageURL + (imageURL.indexOf("?") == -1 ? "?" : "&") + Date.now();

                $(widgetElement).css({
                    "background-image": "url(" + cacheBreakerURL + ")"
                });
            }
        }

        this.render = function (element) {
            $(element).css({
                width: "100%",
                height: "100%",
                "background-size": "cover",
                "background-position": "center"
            });

            widgetElement = element;
        }

        this.onSettingsChanged = function (newSettings) {
            stopTimer();

            if (newSettings.refresh && newSettings.refresh > 0) {
                timer = setInterval(updateImage, Number(newSettings.refresh) * 1000);
            }
        }

        this.onCalculatedValueChanged = function (settingName, newValue) {
            if (settingName == "src") {
                imageURL = newValue;
            }

            updateImage();
        }

        this.onDispose = function () {
            stopTimer();
        }

        this.getHeight = function () {
            return 4;
        }

        this.onSettingsChanged(settings);
    };

    freeboard.loadWidgetPlugin({
        type_name: "picture",
        display_name: "Picture",
        fill_size: true,
        settings: [
            {
                name: "src",
                display_name: "Image URL",
                type: "calculated"
            },
            {
                "type": "number",
                "display_name": "Refresh every",
                "name": "refresh",
                "suffix": "seconds",
                "description": "Leave blank if the image doesn't need to be refreshed"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new pictureWidget(settings));
        }
    });

    freeboard.addStyle('.indicator-light', "border-radius:50%;width:22px;height:22px;border:2px solid #3d3d3d;margin-top:5px;float:left;background-color:#222;margin-right:10px;");
    freeboard.addStyle('.indicator-light.on', "background-color:#FFC773;box-shadow: 0px 0px 15px #FF9900;border-color:#FDF1DF;");
    freeboard.addStyle('.indicator-text', "margin-top:10px;");
    var indicatorWidget = function (settings) {
        var self = this;
        var titleElement = $('<h2 class="section-title"></h2>');
        var stateElement = $('<div class="indicator-text"></div>');
        var indicatorElement = $('<div class="indicator-light"></div>');
        var currentSettings = settings;
        var isOn = false;
        var onText;
        var offText;

        function updateState() {
            indicatorElement.toggleClass("on", isOn);

            if (isOn) {
                stateElement.text((_.isUndefined(onText) ? (_.isUndefined(currentSettings.on_text) ? "" : currentSettings.on_text) : onText));
            }
            else {
                stateElement.text((_.isUndefined(offText) ? (_.isUndefined(currentSettings.off_text) ? "" : currentSettings.off_text) : offText));
            }
        }

        this.render = function (element) {
            $(element).append(titleElement).append(indicatorElement).append(stateElement);
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            titleElement.html((_.isUndefined(newSettings.title) ? "" : newSettings.title));
            updateState();
        }

        this.onCalculatedValueChanged = function (settingName, newValue) {
            if (settingName == "value") {
                isOn = Boolean(newValue);
            }
            if (settingName == "on_text") {
                onText = newValue;
            }
            if (settingName == "off_text") {
                offText = newValue;
            }

            updateState();
        }

        this.onDispose = function () {
        }

        this.getHeight = function () {
            return 1;
        }

        this.onSettingsChanged(settings);
    };

    freeboard.loadWidgetPlugin({
        type_name: "indicator",
        display_name: "Indicator Light",
        settings: [
            {
                name: "title",
                display_name: "Title",
                type: "text"
            },
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            },
            {
                name: "on_text",
                display_name: "On Text",
                type: "calculated"
            },
            {
                name: "off_text",
                display_name: "Off Text",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new indicatorWidget(settings));
        }
    });

    freeboard.addStyle('.gm-style-cc a', "text-shadow:none;");

    var googleMapWidget = function (settings) {
        var self = this;
        var currentSettings = settings;
        var map;
        var marker;
        var currentPosition = {};

        function updatePosition() {
            if (map && marker && currentPosition.lat && currentPosition.lon) {
                var newLatLon = new google.maps.LatLng(currentPosition.lat, currentPosition.lon);
                marker.setPosition(newLatLon);
                map.panTo(newLatLon);
            }
        }

        this.render = function (element) {
            function initializeMap() {
                var mapOptions = {
                    zoom: 13,
                    center: new google.maps.LatLng(37.235, -115.811111),
                    disableDefaultUI: true,
                    draggable: false,
                    styles: [
                        {
                            "featureType": "water", "elementType": "geometry", "stylers": [
                                {"color": "#2a2a2a"}
                            ]
                        },
                        {
                            "featureType": "landscape", "elementType": "geometry", "stylers": [
                                {"color": "#000000"},
                                {"lightness": 20}
                            ]
                        },
                        {
                            "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [
                                {"color": "#000000"},
                                {"lightness": 17}
                            ]
                        },
                        {
                            "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [
                                {"color": "#000000"},
                                {"lightness": 29},
                                {"weight": 0.2}
                            ]
                        },
                        {
                            "featureType": "road.arterial", "elementType": "geometry", "stylers": [
                                {"color": "#000000"},
                                {"lightness": 18}
                            ]
                        },
                        {
                            "featureType": "road.local", "elementType": "geometry", "stylers": [
                                {"color": "#000000"},
                                {"lightness": 16}
                            ]
                        },
                        {
                            "featureType": "poi", "elementType": "geometry", "stylers": [
                                {"color": "#000000"},
                                {"lightness": 21}
                            ]
                        },
                        {
                            "elementType": "labels.text.stroke", "stylers": [
                                {"visibility": "on"},
                                {"color": "#000000"},
                                {"lightness": 16}
                            ]
                        },
                        {
                            "elementType": "labels.text.fill", "stylers": [
                                {"saturation": 36},
                                {"color": "#000000"},
                                {"lightness": 40}
                            ]
                        },
                        {
                            "elementType": "labels.icon", "stylers": [
                                {"visibility": "off"}
                            ]
                        },
                        {
                            "featureType": "transit", "elementType": "geometry", "stylers": [
                                {"color": "#000000"},
                                {"lightness": 19}
                            ]
                        },
                        {
                            "featureType": "administrative", "elementType": "geometry.fill", "stylers": [
                                {"color": "#000000"},
                                {"lightness": 20}
                            ]
                        },
                        {
                            "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [
                                {"color": "#000000"},
                                {"lightness": 17},
                                {"weight": 1.2}
                            ]
                        }
                    ]
                };

                map = new google.maps.Map(element, mapOptions);

                google.maps.event.addDomListener(element, 'mouseenter', function (e) {
                    e.cancelBubble = true;
                    if (!map.hover) {
                        map.hover = true;
                        map.setOptions({zoomControl: true});
                    }
                });

                google.maps.event.addDomListener(element, 'mouseleave', function (e) {
                    if (map.hover) {
                        map.setOptions({zoomControl: false});
                        map.hover = false;
                    }
                });

                marker = new google.maps.Marker({map: map});

                updatePosition();
            }

            if (window.google && window.google.maps) {
                initializeMap();
            }
            else {
                window.gmap_initialize = initializeMap;
                head.js("https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=gmap_initialize");
            }
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.onCalculatedValueChanged = function (settingName, newValue) {
            if (settingName == "lat") {
                currentPosition.lat = newValue;
            }
            else if (settingName == "lon") {
                currentPosition.lon = newValue;
            }

            updatePosition();
        }

        this.onDispose = function () {
        }

        this.getHeight = function () {
            return 4;
        }

        this.onSettingsChanged(settings);
    };

    freeboard.loadWidgetPlugin({
        type_name: "google_map",
        display_name: "Google Map",
        fill_size: true,
        settings: [
            {
                name: "lat",
                display_name: "Latitude",
                type: "calculated"
            },
            {
                name: "lon",
                display_name: "Longitude",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new googleMapWidget(settings));
        }
    });

    freeboard.addStyle('.html-widget', "white-space:normal;width:100%;height:100%");

    var htmlWidget = function (settings) {
        var self = this;
        var htmlElement = $('<div class="html-widget"></div>');
        var currentSettings = settings;

        this.render = function (element) {
            $(element).append(htmlElement);
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.onCalculatedValueChanged = function (settingName, newValue) {
            if (settingName == "html") {
                htmlElement.html(newValue);
            }
        }

        this.onDispose = function () {
        }

        this.getHeight = function () {
            return Number(currentSettings.height);
        }

        this.onSettingsChanged(settings);
    };

    freeboard.loadWidgetPlugin({
        "type_name": "html",
        "display_name": "HTML",
        "fill_size": true,
        "settings": [
            {
                "name": "html",
                "display_name": "HTML",
                "type": "calculated",
                "description": "Can be literal HTML, or javascript that outputs HTML."
            },
            {
                "name": "height",
                "display_name": "Height Blocks",
                "type": "number",
                "default_value": 4,
                "description": "A height block is around 60 pixels"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new htmlWidget(settings));
        }
    });


    // 自定义组件
    freeboard.addStyle('.custom-widget', "background-color:#ffffff;");
    freeboard.addStyle('.custom-wrapper', "height:500px;");
    freeboard.addStyle('.custom-randar', "height:220px;");
    freeboard.addStyle('.custom-mem', "height:135px;");
    freeboard.addStyle('.custom-cpu', "height:240px;");
    freeboard.addStyle('.custom-gauge', "height:180px;");
    freeboard.addStyle('.custom-core', "height:200px;");

    // 自定义组件 折线图
    var eChartsLineWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget" style="background: transparent"><div class="custom-wrapper" id="' + thisGaugeID + '"></div></div>');
        var currentSettings = settings;
        var option = {
            xAxis: {
                type: 'category',
                boundaryGap: false
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };

        this.render = function (element) {
            $(element).append(htmlElement);
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            if (value && value.length > 0) {
                value = eval(value)
                var xAxisData = [];
                var seriesData = [];
                $.each(value, function (i, item) {
                    xAxisData.push(item.name)
                    seriesData.push(item.value)
                });
                option.xAxis.data = xAxisData
                option.series.push({
                    data: seriesData,
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    }
                })
            }
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.getHeight = function () {
            return Number(8)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_line",
        "display_name": "EChartsLine",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsLineWidget(settings));
        }
    });

    // 自定义组件 区域折线图
    var eChartsAreaWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget" style="background: transparent"><div class="custom-wrapper" id="' + thisGaugeID + '"></div></div>');
        var currentSettings = settings;
        var option = {
            xAxis: {
                type: 'category',
                boundaryGap: false
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };

        this.render = function (element) {
            $(element).append(htmlElement);
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            if (value && value.length > 0) {
                value = eval(value)
                var xAxisData = [];
                var seriesData = [];
                $.each(value, function (i, item) {
                    xAxisData.push(item.name)
                    seriesData.push(item.value)
                });
                option.xAxis.data = xAxisData
                option.series.push({
                    data: seriesData,
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: '#188df0'
                    },
                    lineStyle: {
                        color: '#83bff6'
                    }
                })
            }
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.getHeight = function () {
            return Number(8)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_Area",
        "display_name": "EChartsArea",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsAreaWidget(settings));
        }
    });

    // 自定义组件 柱状图
    var eChartsBarWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget" style="background: transparent"><div class="custom-wrapper" id="' + thisGaugeID + '"></div></div>');
        var currentSettings = settings;
        var option = {
            xAxis: {
                silent: false,
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };

        this.render = function (element) {
            $(element).append(htmlElement);
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            if (value && value.length > 0) {
                value = eval(value)
                var xAxisData = [];
                var seriesData = [];
                $.each(value, function (i, item) {
                    xAxisData.push(item.name)
                    seriesData.push(item.value)
                });
                option.xAxis.data = xAxisData
                option.series.push({
                    name: 'bar',
                    type: 'bar',
                    // itemStyle: function () {
                    //     return {
                    //         color: '#ffffff'
                    //     }
                    // },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ]
                        )
                    },
                    data: seriesData,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                })
            }
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.getHeight = function () {
            return Number(8)
        }

        this.onSettingsChanged(settings);

    }
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_bar",
        "display_name": "EChartsBar",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsBarWidget(settings));
        }
    });

    // 自定义组件 饼图
    var eChartsPieWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget" style="background: transparent"><div class="custom-wrapper" id="' + thisGaugeID + '"></div></div>');
        var currentSettings = settings;
        var option = {
            series: []
        };
        this.render = function (element) {
            $(element).append(htmlElement);
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            option.series.push({
                type: 'pie',
                data: value
            })
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.getHeight = function () {
            return Number(8)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_pie",
        "display_name": "EChartsPie",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsPieWidget(settings));
        }
    });

    // 自定义组件 环图
    var eChartsDoughnutWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget" style="background: transparent"><div class="custom-wrapper" id="' + thisGaugeID + '"></div></div>');
        var currentSettings = settings;
        var option = {
            series: []
        };
        this.render = function (element) {
            $(element).append(htmlElement);
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            option.series.push({
                type: 'pie',
                data: value,
                radius: ['50%', '70%'],
                avoidLabelOverlap: true,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
            })
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.getHeight = function () {
            return Number(8)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_Doughnut",
        "display_name": "EChartsDoughnut",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsDoughnutWidget(settings));
        }
    });

    // 自定义组件 散点图
    var eChartsBasicScatterWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget" style="background: transparent"><div class="custom-wrapper" id="' + thisGaugeID + '"></div></div>');
        var currentSettings = settings;
        var option = {
            xAxis: {},
            yAxis: {},
            series: []
        };

        this.render = function (element) {
            $(element).append(htmlElement);
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            value = eval(value)
            if (value && value.length > 0) {
                var axisData = [];
                option.series.push({
                    symbolSize: 20,
                    type: 'scatter',
                    data: axisData
                })
            }
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.getHeight = function () {
            return Number(8)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_BasicScatter",
        "display_name": "EChartsBasicScatter",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsBasicScatterWidget(settings));
        }
    });

    // 自定义组件 仪表盘
    var eChartsGaugeWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget" style="background: transparent"><div class="custom-wrapper" id="' + thisGaugeID + '"></div></div>');
        var currentSettings = settings;
        var option = {
            series: [{
                name: '业务指标',
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: 0, name: '完成率'}]
            }]
        };

        this.render = function (element) {
            $(element).append(htmlElement);
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = (Math.random() * 100).toFixed(2) - 0;
            // option.series.push({
            //     name: '业务指标',
            //     type: 'gauge',
            //     detail: {formatter: '{value}%'},
            //     data: [{value: 0, name: '完成率'}]
            // })
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            var dom = document.getElementById(thisGaugeID);
            var myChart = echarts.init(dom);
            myChart.setOption(option, true);
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.getHeight = function () {
            return Number(8)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_Gauge",
        "display_name": "EChartsGauge",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsGaugeWidget(settings));
        }
    });

    // 自定义组件 雷达图
    var eChartsRadarWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget" style="background: transparent"><div class="custom-wrapper" id="' + thisGaugeID + '"></div></div>');
        var currentSettings = settings;
        var option = {
            radar: {
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                indicator: [
                    {name: '销售（sales）', max: 6500},
                    {name: '管理（Administration）', max: 16000},
                    {name: '信息技术（Information Techology）', max: 30000},
                    {name: '客服（Customer Support）', max: 38000},
                    {name: '研发（Development）', max: 52000}
                ]
            },
            series: []
        };
        this.render = function (element) {
            $(element).append(htmlElement);
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            option.series.push({
                name: '预算 vs 开销（Budget vs spending）',
                type: 'radar',
                data: value
            })
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.getHeight = function () {
            return Number(8)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_Radar",
        "display_name": "EChartsRadar",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsRadarWidget(settings));
        }
    });

    // 自定义组件 象形柱图
    var eChartsDottedBarWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget" style="background: transparent"><div class="custom-wrapper" id="' + thisGaugeID + '"></div></div>');
        var currentSettings = settings;
        var option = {
            xAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            yAxis: {
                splitLine: {show: false},
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            series: []
        };

        this.render = function (element) {
            $(element).append(htmlElement);
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            if (value && value.length > 0) {
                value = eval(value)
                option.xAxis.data = value[0].dateValue
                option.series.push(
                    {
                        name: 'line',
                        type: 'line',
                        smooth: true,
                        showAllSymbol: true,
                        symbol: 'emptyCircle',
                        symbolSize: 15,
                        data: value[0].value1
                    },
                    {
                        name: 'bar',
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 5,
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#14c8d4'},
                                        {offset: 1, color: '#43eec6'}
                                    ]
                                )
                            }
                        },
                        data: value[0].value2
                    },
                    {
                        name: 'line',
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: 'rgba(20,200,212,0.5)'},
                                        {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                                        {offset: 1, color: 'rgba(20,200,212,0)'}
                                    ]
                                )
                            }
                        },
                        z: -12,
                        data: value[0].value1
                    },
                    {
                        name: 'dotted',
                        type: 'pictorialBar',
                        symbol: 'rect',
                        itemStyle: {
                            normal: {
                                color: '#0f375f'
                            }
                        },
                        symbolRepeat: true,
                        symbolSize: [12, 4],
                        symbolMargin: 1,
                        z: -10,
                        data: value[0].value1
                    }
                )
            }
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.getHeight = function () {
            return Number(8)
        }

        this.onSettingsChanged(settings);

    }
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_DottedBar",
        "display_name": "EChartsDottedBar",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsDottedBarWidget(settings));
        }
    });

    // 自定义组件 堆叠柱图
    var eChartsStackedBarWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget" style="background: transparent"><div class="custom-wrapper" id="' + thisGaugeID + '"></div></div>');
        var currentSettings = settings;
        var option = {
            xAxis: {
                type: 'category',
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };

        this.render = function (element) {
            $(element).append(htmlElement);
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            if (value && value.length > 0) {
                value = eval(value)
                option.xAxis.data = value[0].dateValue
                option.series.push(
                    {
                        name: '直接访问',
                        type: 'bar',
                        data: value[0].value1
                    },
                    {
                        name: '邮件营销',
                        type: 'bar',
                        stack: '广告',
                        data: value[0].value2
                    },
                    {
                        name: '联盟广告',
                        type: 'bar',
                        stack: '广告',
                        data: value[0].value3
                    },
                    {
                        name: '视频广告',
                        type: 'bar',
                        stack: '广告',
                        data: value[0].value4
                    },
                    {
                        name: '搜索引擎',
                        type: 'bar',
                        data: value[0].value5,
                        markLine: {
                            lineStyle: {
                                normal: {
                                    type: 'dashed'
                                }
                            },
                            data: [
                                [{type: 'min'}, {type: 'max'}]
                            ]
                        }
                    },
                    {
                        name: '百度',
                        type: 'bar',
                        barWidth: 5,
                        stack: '搜索引擎',
                        data: value[0].value6
                    },
                    {
                        name: '谷歌',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: value[0].value7
                    },
                    {
                        name: '必应',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: value[0].value8
                    },
                    {
                        name: '其他',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: value[0].value9
                    }
                )
            }
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }

        this.getHeight = function () {
            return Number(8)
        }

        this.onSettingsChanged(settings);

    }
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_StackedBar",
        "display_name": "EChartsStackedBar",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsStackedBarWidget(settings));
        }
    });

    // 自定义图片
    var eChartsImgWidget = function (settings) {
        var displayElement = $('<div class="tw-display"></div>');
        var titleElement = $('<h2 class="section-title tw-title"></h2>');
        var imgElement = $('<img class="tw-img" src="">');
        var imageURL
        var title

        function updateImage() {
            var cacheBreakerURL = imageURL
            var titleValue = title
            displayElement.css({
                backgroundImage: "url('img/img_bg.png')",
                backgroundRepeat: "no-repeat",
                backgroundPosition: "center"
            })
            imgElement.attr('src', cacheBreakerURL);
            imgElement.css({
                display: "block",
                // width: "150px",
                margin: "0 auto"
            })
            titleElement.html(titleValue)
            titleElement.css({
                textAlign: "center",
                color: "#ffae55",
                marginTop: "35px",
                marginBottom: "10px"
            })
        }

        this.render = function (element) {
            $(element).empty();
            $(element).css({
                width: "100%",
                height: "100%",
            });

            $(displayElement)
                .append(titleElement)
                .append(imgElement)

            $(element).append(displayElement);

            updateImage();
        }
        this.onCalculatedValueChanged = function (settingName, newValue) {
            imageURL = newValue[0].src
            title = newValue[0].value
            updateImage();
        }

        this.onSettingsChanged = function (newSettings) {
        }
        this.getHeight = function () {
            return 4;
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "e_charts_img",
        display_name: "EChartsImg",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsImgWidget(settings));
        }
    });

    // 自定义组件 多雷达图
    var eChartsMoreRadarWidget = function (settings) {
        var thisGaugeID_1 = "gauge-" + gaugeID++;
        var thisGaugeID_2 = "gauge-" + gaugeID++;
        var thisGaugeID_3 = "gauge-" + gaugeID++;
        var htmlElement_1 = $('<div class="custom-widget" style="background: transparent"><div class="custom-randar" id="' + thisGaugeID_1 + '"></div></div>');
        var htmlElement_2 = $('<div class="custom-widget" style="background: transparent"><div class="custom-randar" id="' + thisGaugeID_2 + '"></div></div>');
        var htmlElement_3 = $('<div class="custom-widget" style="background: transparent"><div class="custom-randar" id="' + thisGaugeID_3 + '"></div></div>');
        var currentSettings = settings;
        var option_1 = {
            radar: {
                name: {
                    textStyle: {
                        fontSize: 10,
                        color: '#fff',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                splitArea: {
                    show: false
                },
                radius: '60%',
                indicator: [
                    {name: '销售', max: 6500},
                    {name: '管理', max: 16000},
                    {name: '信息技术', max: 30000},
                    {name: '客服', max: 38000},
                    {name: '研发', max: 52000}
                ]
            },
            legend: {
                show: true,
                bottom: 5,
                data: [],
                itemGap: 1,
                itemWidth: 10,
                textStyle: {
                    color: '#fff',
                    fontSize: 10
                },
                icon: "circle"
            },
            series: []
        };
        var option_2 = {
            radar: {
                name: {
                    textStyle: {
                        fontSize: 10,
                        color: '#fff',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                splitArea: {
                    show: false
                },
                radius: '60%',
                indicator: [
                    {name: '销售', max: 6500},
                    {name: '管理', max: 16000},
                    {name: '信息技术', max: 30000},
                    {name: '客服', max: 38000},
                    {name: '研发', max: 52000}
                ]
            },
            legend: {
                bottom: 5,
                data: [],
                itemGap: 1,
                itemWidth: 10,
                textStyle: {
                    color: '#fff',
                    fontSize: 10
                },
                icon: "circle"
            },
            series: []
        };
        var option_3 = {
            radar: {
                name: {
                    textStyle: {
                        fontSize: 10,
                        color: '#fff',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                splitArea: {
                    show: false
                },
                radius: '60%',
                indicator: [
                    {name: '销售', max: 6500},
                    {name: '管理', max: 16000},
                    {name: '信息技术', max: 30000},
                    {name: '客服', max: 38000},
                    {name: '研发', max: 52000}
                ]
            },
            legend: {
                bottom: 5,
                data: [],
                itemGap: 1,
                itemWidth: 10,
                textStyle: {
                    color: '#fff',
                    fontSize: 10
                },
                icon: "circle"
            },
            series: []
        };
        let creatElement = function () {
            setTimeout(function () {
                htmlElement_1.css({
                    width: "33%",
                    display: "inline-block"
                })
                htmlElement_2.css({
                    width: "33%",
                    display: "inline-block"
                })
                htmlElement_3.css({
                    width: "33%",
                    display: "inline-block"
                })
                var dom_1 = document.getElementById(thisGaugeID_1);
                var dom_2 = document.getElementById(thisGaugeID_2);
                var dom_3 = document.getElementById(thisGaugeID_3);
                var myChart_1 = echarts.init(dom_1);
                var myChart_2 = echarts.init(dom_2);
                var myChart_3 = echarts.init(dom_3);
                myChart_1.setOption(option_1, true);
                myChart_2.setOption(option_2, true);
                myChart_3.setOption(option_3, true);
            }, 1000);
        }
        this.render = function (element) {
            $(element)
                .append(htmlElement_1)
                .append(htmlElement_2)
                .append(htmlElement_3)
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            option_1.legend.data = []
            option_2.legend.data = []
            option_3.legend.data = []
            for (var i = 0; i <= value[0].randar_1.length - 1; i++) {
                option_1.legend.data.push(value[0].randar_1[i].name)
                option_2.legend.data.push(value[1].randar_2[i].name)
                option_3.legend.data.push(value[2].randar_3[i].name)
            }
            option_1.series = []
            option_2.series = []
            option_3.series = []
            option_1.series.push(
                {
                    type: 'radar',
                    data: value[0].randar_1,
                    itemStyle: {
                        normal:
                            {
                                areaStyle: {
                                    type: 'default',
                                    opacity: 0.3
                                }
                            }
                    }
                }
            )
            option_2.series.push(
                {
                    type: 'radar',
                    data: value[1].randar_2,
                    itemStyle: {
                        normal:
                            {
                                areaStyle: {
                                    type: 'default',
                                    opacity: 0.3
                                }
                            }
                    }
                }
            )
            option_3.series.push(
                {
                    type: 'radar',
                    data: value[2].randar_3,
                    itemStyle: {
                        normal:
                            {
                                areaStyle: {
                                    type: 'default',
                                    opacity: 0.3
                                }
                            }
                    }
                }
            )
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        }

        this.getHeight = function () {
            return Number(4)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_MoreRadar",
        "display_name": "EChartsMoreRadar",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsMoreRadarWidget(settings));
        }
    });

    // 自定义报警组件
    var eChartsWarnWidget = function (settings) {
        var displayElement = $('<div class="tw-display"></div>');
        var imgElement = $('<div class="tw-img"></div>');
        var tableElement = $('<div class="tw-table"></div>')
        var tableTag = $('<table id="table_1"></table>')
        var currentSettings = settings;
        var tableData
        var textData_1
        var textData_2
        var textData_3
        var textData_4
        var textData_5
        var textData_6
        var textData_7
        var data_1 = $('<p></p>');
        var data_2 = $('<p></p>');
        var data_3 = $('<p></p>');
        var data_4 = $('<p></p>');
        var data_5 = $('<div><p class="text_1"></p><p class="text_2"></p><p class="text_3"></p></div>')
        var tableTh = $('<thead></thead>')
        var tableTb = $('<tbody></tbody>')
        let creatTable = function () {
            var num = tableData.length
            var tNum = tableData[0].length
            var tbdata = ""
            var thdata = ""
            thdata += "<tr>" +
                "<th colspan='2'>XXXXXXXX</th>" +
                "<th>XXXX</th>" +
                "<th>XXX</th>" +
                "</tr>"
            for (let i = 0; i <= num - 1; i++) {
                tbdata += "<tr>"
                tbdata += "<td>" + (i + 1) + "</td>";
                for (let j = 0; j <= tNum - 1; j++) {
                    tbdata += "<td>" + tableData[i][j] + "</td>";
                }
                tbdata += "</tr>"
            }
            tableTh.html(thdata)
            tableTb.html(tbdata)
        }
        this.render = function (element) {
            $(element).empty();
            $(element).css({
                width: "100%",
                height: "100%",
            });
            imgElement.css({
                backgroundImage: "url('img/img_04.png')",
                backgroundRepeat: "no-repeat",
                backgroundPosition: "center",
                width: "40%",
                height: "220px",
                position: "relative",
                display: "inline-block",
                margin: "0 5%"
            })
            data_1.css({
                position: "absolute",
                display: "inline-block",
                left: "256px",
                top: "18px",
                color: "#19a1a0"
            })
            data_2.css({
                position: "absolute",
                display: "inline-block",
                right: "170px",
                top: "22px",
                color: "#19a1a0"
            })
            data_3.css({
                position: "absolute",
                display: "inline-block",
                right: "260px",
                top: "78px",
                color: "#19a1a0"
            })
            data_4.css({
                position: "absolute",
                display: "inline-block",
                right: "213px",
                top: "154px",
                color: "#19a1a0"
            })
            data_5.css({
                position: "absolute",
                display: "inline-block",
                left: "248px",
                top: "113px",
                color: "#19a1a0",
            })
            $(imgElement)
                .append(data_1)
                .append(data_2)
                .append(data_3)
                .append(data_4)
                .append(data_5)
            tableElement.css({
                display: "inline-block",
                width: "40%",
                height: "220px",
                margin: "0 5%"
            })
            $(tableTag)
                .append(tableTh)
                .append(tableTb)
            $(tableElement).append(tableTag)
            $(displayElement)
                .append(imgElement)
                .append(tableElement)

            $(element).append(displayElement);
        }
        let textChange = function () {
            data_1.html(textData_1)
            data_2.html(textData_2)
            data_3.html(textData_3)
            data_4.html(textData_4)
            $(".text_1").html(textData_5)
            $(".text_2").html(textData_6)
            $(".text_3").html(textData_7)
        }
        this.onCalculatedValueChanged = function (settingName, newValue) {
            var textData = newValue.pic
            textData_1 = textData[0]
            textData_2 = textData[1]
            textData_3 = textData[2]
            textData_4 = textData[3]
            textData_5 = textData[4]
            textData_6 = textData[5]
            textData_7 = textData[6]
            tableData = newValue.table
            textChange()
            creatTable()
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        }
        this.getHeight = function () {
            return Number(4);
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "e_charts_Warn",
        display_name: "EChartsWarn",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsWarnWidget(settings));
        }
    });

    // 自定义网络设备组件
    var eChartsEquipWidget = function (settings) {
        var displayElement = $('<div class="tw-display"></div>');
        var tableElement_1 = $('<div class="tw-table"></div>');
        var tableTag_1 = $('<table class="equip"></table>')
        var tableTb_1 = $('<tbody></tbody>')
        var newData_1 = ""
        let creatTable_1 = function () {
            var num = newData_1.length
            var tNum = newData_1[0].length
            var tbdata = ""
            for (let i = 0; i <= num - 1; i++) {
                tbdata += "<tr>"
                for (let j = 0; j <= tNum - 1; j++) {
                    tbdata += "<td>" + newData_1[i][j] + "</td>";
                }
                tbdata += "</tr>"
            }
            tableTb_1.html(tbdata)
        }
        this.render = function (element) {
            $(element).empty();
            $(element).css({
                width: "100%",
                height: "100%",
            });
            tableElement_1.css({
                display: "inline-block",
                width: "100%",
                height: "110px",
            })
            $(tableTag_1)
                .append(tableTb_1)
            $(tableElement_1)
                .append(tableTag_1)
            $(displayElement)
                .append(tableElement_1)
            $(element).append(displayElement);
        }
        this.onCalculatedValueChanged = function (settingName, newValue) {
            newData_1 = newValue.table_1
            creatTable_1()
        }

        this.onSettingsChanged = function (newSettings) {
        }
        this.getHeight = function () {
            return Number(2);
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "e_charts_Equip",
        display_name: "EChartsEquip",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsEquipWidget(settings));
        }
    });

    // 自定义组件网络内存
    var eChartsMemoryWidget = function (settings) {
        var text_1 = $('<p><span>1</span><span class="title-1"></span></p>')
        var text_2 = $('<p><span>1</span><span class="title-2"></span></p>')
        var title_1
        var title_2
        var thisGaugeID_1 = "gauge-" + gaugeID++;
        var textElement_1 = $('<div class="custom-widget" style="background: transparent"></div>')
        var htmlElement_1 = $('<div class="custom-mem" id="' + thisGaugeID_1 + '"></div>');
        var currentSettings = settings;
        var option_1 = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width: '2'//坐标线的宽度
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',//坐标值得具体的颜色
                    }
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width: '2'//坐标线的宽度
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',//坐标值得具体的颜色
                    }
                }
            },
            grid: {top: "20px", bottom: "20px", right: 0},
            series: []
        };
        let creatElement = function () {
            textElement_1
                .append(text_1)
                .append(text_2)
                .append(htmlElement_1)
            text_1.css({fontSize: "16px", color: "#02c7e0", lineHeight: "20px", margin: 0})
            text_2.css({fontSize: "16px", color: "#02c7e0", lineHeight: "20px", margin: 0})
            textElement_1.css({margin: "0 5%", width: "90%", marginTop: "50px"})
            setTimeout(function () {
                $('.title-1').html(title_1)
                $('.title-2').html(title_2)
                var dom_1 = document.getElementById(thisGaugeID_1);
                var myChart_1 = echarts.init(dom_1);
                myChart_1.setOption(option_1, true);
            }, 1000);
        }

        this.render = function (element) {
            $(element)
                .append(textElement_1)
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value_1 = newValue.area_1;
            title_1 = newValue.title_1[0]
            title_2 = newValue.title_1[1]
            var xAxisData_1 = [];
            var seriesData_1 = [];
            var changeColor = [
                [{
                    offset: 0, color: 'rgba(255,0,0,0.4)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(0,0,255,0.4)' // 100% 处的颜色
                }],
                [{
                    offset: 0, color: 'rgba(0,255,0,0.4)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(255,255,255,0.4)' // 100% 处的颜色
                }],
                [{
                    offset: 0, color: 'rgba(255,255,0,0.4)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(0,0,0,0.4)' // 100% 处的颜色
                }],
            ]
            option_1.series = []
            option_1.xAxis.data = xAxisData_1
            for (let i = 0; i < value_1.yValue.length; i++) {
                for (let j = 0; j < value_1.yValue[0].length; j++) {
                    // xAxisData_1.push(item.name)
                    seriesData_1[i] = value_1.yValue[i]
                }
                option_1.series.push({
                    name: "test" + i,
                    data: seriesData_1[i],
                    type: 'line',
                    smooth: false,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, changeColor[i]),
                            //背景渐变色
                            lineStyle: {        // 系列级个性化折线样式
                                width: 3,
                                type: 'solid',
                                color: "#4fd6d2"
                            }
                        },
                    },
                    lineStyle: {
                        color: '#83bff6'
                    }
                })
            }
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        }

        this.getHeight = function () {
            return Number(4)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_Memory",
        "display_name": "EChartsMemory",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsMemoryWidget(settings));
        }
    });

    // 自定义组件告警统计
    var eChartsAlarmWidget = function (settings) {
        var displayElement = $('<div class="tw-display"></div>');
        var currentSettings = settings;
        var alarmData = ""
        let creatElement = function () {
            let ele = ""
            let num = alarmData.length
            for (let i = 0; i < num; i++) {
                if (i == 2) {
                    if (alarmData[i].trend === "up") {
                        ele += "<div class='alarm'>"
                        ele += "<div class='his-pass'>历史审批通过量</div>"
                        ele += "<span class='ac-value'>" + alarmData[i].data + "</span>"
                        ele += "<span class='compa'>同比上周</span>"
                        ele += "<img src='img/arrowUp.png'>"
                        ele += "<span class='scale' style='color: #25d94b;'>" + alarmData[i].percent + "</span>"
                        ele += "<img src='img/up.png'>"
                        ele += "</div>"
                    } else {
                        ele += "<div class='alarm'>"
                        ele += "<div class='his-pass'>历史审批通过量</div>"
                        ele += "<span class='ac-value'>" + alarmData[i].data + "</span>"
                        ele += "<span class='compa'>同比上周</span>"
                        ele += "<img src='img/arrowDown.png'>"
                        ele += "<span class='scale' style='color: #ff5984;'>" + alarmData[i].percent + "</span>"
                        ele += "<img src='img/down.png'>"
                        ele += "</div>"
                    }
                } else {
                    if (alarmData[i].trend === "up") {
                        ele += "<div class='alarm'>"
                        ele += "<span class='ac-value'>" + alarmData[i].data + "</span>"
                        ele += "<span class='compa'>同比上周</span>"
                        ele += "<img src='img/arrowUp.png'>"
                        ele += "<span class='scale' style='color: #25d94b;'>" + alarmData[i].percent + "</span>"
                        ele += "<img src='img/up.png'>"
                        ele += "</div>"
                    } else {
                        ele += "<div class='alarm'>"
                        ele += "<span class='ac-value'>" + alarmData[i].data + "</span>"
                        ele += "<span class='compa'>同比上周</span>"
                        ele += "<img src='img/arrowDown.png'>"
                        ele += "<span class='scale' style='color: #ff5984;'>" + alarmData[i].percent + "</span>"
                        ele += "<img src='img/down.png'>"
                        ele += "</div>"
                    }
                }
            }
            displayElement.html(ele)
        }
        this.render = function (element) {
            displayElement.css({paddingTop: "18px"})
            $(element)
                .append(displayElement)
            setTimeout(function () {
            }, 1000);
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            alarmData = newValue.data
            creatElement()
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        }

        this.getHeight = function () {
            return Number(2)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_Alarm",
        "display_name": "EChartsAlarm",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsAlarmWidget(settings));
        }
    });

    // 自定义组件 CPUTOP和下行流量TOP
    var eChartsCPUWidget = function (settings) {
        var thisGaugeID_1 = "gauge-" + gaugeID++;
        var thisGaugeID_2 = "gauge-" + gaugeID++;
        var htmlElement_1 = $('<div class="custom-widget" style="background: transparent"><div class="custom-cpu" id="' + thisGaugeID_1 + '"></div></div>');
        var htmlElement_2 = $('<div class="custom-widget" style="background: transparent"><div class="custom-cpu" id="' + thisGaugeID_2 + '"></div></div>');
        var currentSettings = settings;
        var option_1 = {
            xAxis: {
                type: 'value',
                show: false
            },
            yAxis: {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: "#59d4fc"
                },
                data: []
            },
            grid: {
                left: 80,
                right: 10,
                top: 10,
                bottom: 10
            },
            series: []
        };
        var option_2 = {
            title: {
                text: "",
                textStyle: {
                    color: "#59d4fc"
                }
            },
            legend: {
                show: true,
                data: [],
                bottom: 10,
                textStyle: {
                    color: '#fff',
                },
                itemGap: 30
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    color: "#6e69b2"
                },
                axisLine: {
                    lineStyle: {
                        color: "#1e3a71"
                    }
                },
                data: []
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: "#6e69b2",
                    formatter: '{value} %'
                },
                axisLine: {
                    lineStyle: {
                        color: "#1e3a71"
                    }
                },
                splitLine: {
                    show: false
                }
            },
            grid: {
                left: 50,
                right: 50,
                top: 50,
                bottom: 60
            },
            series: []
        };
        let creatElement = function () {
            htmlElement_1.css({
                height: "300px",
                display: "inline-block",
                width: "50%",
            })
            htmlElement_2.css({
                height: "300px",
                display: "inline-block",
                width: "50%",
            })
            setTimeout(function () {
                var dom_1 = document.getElementById(thisGaugeID_1);
                var dom_2 = document.getElementById(thisGaugeID_2);
                var myChart_1 = echarts.init(dom_1);
                var myChart_2 = echarts.init(dom_2);
                myChart_1.setOption(option_1, true);
                myChart_2.setOption(option_2, true);
            }, 1000);
        }

        this.render = function (element) {
            $(element)
                .append(htmlElement_1)
                .append(htmlElement_2)
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            if (value) {
                var yAxisData = [];
                var xAxisData = [];
                var seriesData_1 = [];
                var seriesData_2 = [];
                for (let i = 0; i < value.cpu.length; i++) {
                    yAxisData.push(value.cpu[i].name)
                    seriesData_1.push(value.cpu[i].value)
                }
                option_1.series = []
                option_2.series = []
                option_1.yAxis.data = yAxisData
                option_1.series.push({
                    name: 'bar',
                    type: 'bar',
                    // itemStyle: function () {
                    //     return {
                    //         color: '#ffffff'
                    //     }
                    // },
                    barWidth: 5,
                    itemStyle: {
                        color: function (params) {
                            var colorList = [
                                ['#bc3535', '#ff5b7a'],
                                ['#f66800', '#ffb400'],
                                ['#278d65', '#62c467'],
                                ['#00ccff', '#2a54b4'],
                                ['#f75271', '#754abf'],
                            ];
                            var index = params.dataIndex;
                            return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                [
                                    {offset: 0, color: colorList[index][0]},
                                    {offset: 1, color: colorList[index][1]}
                                ]
                            );
                        },
                        barBorderRadius: 5,
                    },
                    label: {
                        show: true,
                        position: "insideBottomRight",
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    data: seriesData_1,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                })
                xAxisData = value.flow.xData
                option_2.title.text = value.flow.title
                option_2.xAxis.data = xAxisData
                for (let i = 0; i < value.flow.yData.length; i++) {
                    var colorList = [[
                        {offset: 0, color: '#5e88f5'},
                        {offset: 1, color: '#7ea7ef'}
                    ], [
                        {offset: 0, color: '#8f52f2'},
                        {offset: 1, color: '#c88aff'}
                    ]]
                    var nameData = value.flow.name
                    option_2.legend.data = nameData
                    seriesData_2[i] = value.flow.yData[i]
                    option_2.series.push({
                        name: nameData[i],
                        type: 'bar',
                        // itemStyle: function () {
                        //     return {
                        //         color: '#ffffff'
                        //     }
                        // },
                        barWidth: 12,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList[i]),
                            barBorderRadius: 2,
                        },
                        data: seriesData_2[i],
                        animationDelay: function (idx) {
                            return idx * 10;
                        }
                    })
                }
            }
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        }

        this.getHeight = function () {
            return Number(4)
        }

        this.onSettingsChanged(settings);

    }
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_CPU",
        "display_name": "EChartsCPU",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsCPUWidget(settings));
        }
    });

    // 自定义组件 总流量TOP和广播流量TOP
    var eChartsFlowWidget = function (settings) {
        var thisGaugeID_1 = "gauge-" + gaugeID++;
        var thisGaugeID_2 = "gauge-" + gaugeID++;
        var htmlElement_1 = $('<div class="custom-widget" style="background: transparent"><div class="custom-randar" id="' + thisGaugeID_1 + '"></div></div>');
        var htmlElement_2 = $('<div class="custom-widget" style="background: transparent"><div class="custom-randar" id="' + thisGaugeID_2 + '"></div></div>');
        var currentSettings = settings;
        var option_1 = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    interval: 1,
                    color: "#6e69b2"
                },
                axisLine: {
                    lineStyle: {
                        color: "#1e3a71"
                    }
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "#1e3a71"
                    }
                },
                splitLine: {
                    show: false
                },
                data: []
            },
            grid: {
                left: 50,
                right: 50,
                top: 50,
                bottom: 30
            },
            series: []
        };
        var option_2 = {
            title: {
                text: "",
                textStyle: {
                    color: "#59d4fc"
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: "#6e69b2"
                },
                axisLine: {
                    lineStyle: {
                        color: "#1e3a71"
                    }
                },
                data: []
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "#1e3a71"
                    }
                },
                splitLine: {
                    show: false
                },
                data: []
            },
            grid: {
                left: 50,
                right: 50,
                top: 50,
                bottom: 30
            },
            series: []
        };
        let creatElement = function () {
            htmlElement_1.css({
                height: "300px",
                display: "inline-block",
                width: "50%",
            })
            htmlElement_2.css({
                height: "300px",
                display: "inline-block",
                width: "50%",
            })
            setTimeout(function () {
                var dom_1 = document.getElementById(thisGaugeID_1);
                var dom_2 = document.getElementById(thisGaugeID_2);
                var myChart_1 = echarts.init(dom_1);
                var myChart_2 = echarts.init(dom_2);
                myChart_1.setOption(option_1, true);
                myChart_2.setOption(option_2, true);
            }, 1000);
        }
        this.render = function (element) {
            $(element)
                .append(htmlElement_1)
                .append(htmlElement_2)
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            if (value) {
                var xAxisData_1 = value.line_1.xData
                var xAxisData_2 = value.line_2.xData
                var seriesData_1 = value.line_1.yData
                var seriesData_2 = value.line_2.yData
                option_1.xAxis.data = xAxisData_1
                option_2.xAxis.data = xAxisData_2
                option_2.title.text = value.line_2.title
                option_1.series = []
                option_2.series = []
                option_1.series.push({
                    type: 'line',
                    barWidth: 5,
                    smooth: true,
                    markPoint: {
                        data: [{
                            type: 'max',
                            symbol: 'image://img/markpoint.png',
                            symbolSize: 35,
                            symbolOffset: [0, '-60%'],
                            label: {
                                color: '#fff'
                            }
                        }, {
                            type: 'min',
                            symbol: 'image://img/markpoint.png',
                            symbolSize: 35,
                            symbolOffset: [0, '-60%'],
                            label: {
                                color: '#fff'
                            }
                        }]
                    },
                    lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {offset: 0, color: "#a54dff"},
                            {offset: 1, color: "#04c1e4"}
                        ])
                    },
                    label: {
                        show: false,
                    },
                    data: seriesData_1,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                })
                option_2.series.push({
                    type: 'line',
                    barWidth: 5,
                    smooth: true,
                    markPoint: {
                        data: [{
                            type: 'max',
                            symbol: 'image://img/markpoint.png',
                            symbolSize: 35,
                            symbolOffset: [0, '-60%'],
                            label: {
                                color: '#fff'
                            }
                        }, {
                            type: 'min',
                            symbol: 'image://img/markpoint.png',
                            symbolSize: 35,
                            symbolOffset: [0, '-60%'],
                            label: {
                                color: '#fff'
                            }
                        }]
                    },
                    lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {offset: 0, color: "#a54dff"},
                            {offset: 1, color: "#04c1e4"}
                        ])
                    },
                    label: {
                        show: false
                    },
                    data: seriesData_2,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                })
            }
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        }

        this.getHeight = function () {
            return Number(4)
        }

        this.onSettingsChanged(settings);

    }
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_Flow",
        "display_name": "EChartsFlow",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsFlowWidget(settings));
        }
    });

    // 自定义组件 仪表盘组
    var eChartsAllGaugeWidget = function (settings) {
        var thisGaugeID_1 = "gauge-" + gaugeID++;
        var thisGaugeID_2 = "gauge-" + gaugeID++;
        var thisGaugeID_3 = "gauge-" + gaugeID++;
        var thisGaugeID_4 = "gauge-" + gaugeID++;
        var htmlElement_1 = $('<div class="custom-widget" style="background: transparent"><div class="custom-gauge" id="' + thisGaugeID_1 + '"></div></div>');
        var htmlElement_2 = $('<div class="custom-widget" style="background: transparent"><div class="custom-gauge" id="' + thisGaugeID_2 + '"></div></div>');
        var htmlElement_3 = $('<div class="custom-widget" style="background: transparent"><div class="custom-gauge" id="' + thisGaugeID_3 + '"></div></div>');
        var htmlElement_4 = $('<div class="custom-widget" style="background: transparent"><div class="custom-gauge" id="' + thisGaugeID_4 + '"></div></div>');
        var currentSettings = settings;
        var option_1 = {series: []};
        var option_2 = {series: []};
        var option_3 = {series: []};
        var option_4 = {series: []};
        let creatElement = function () {
            htmlElement_1.css({display: "inline-block", width: "21%", margin: "0 2%"})
            htmlElement_2.css({display: "inline-block", width: "21%", margin: "0 2%"})
            htmlElement_3.css({display: "inline-block", width: "21%", margin: "0 2%"})
            htmlElement_4.css({display: "inline-block", width: "21%", margin: "0 2%"})
            setTimeout(function () {
                var dom_1 = document.getElementById(thisGaugeID_1);
                var dom_2 = document.getElementById(thisGaugeID_2);
                var dom_3 = document.getElementById(thisGaugeID_3);
                var dom_4 = document.getElementById(thisGaugeID_4);
                var myChart_1 = echarts.init(dom_1);
                var myChart_2 = echarts.init(dom_2);
                var myChart_3 = echarts.init(dom_3);
                var myChart_4 = echarts.init(dom_4);
                myChart_1.setOption(option_1, true);
                myChart_2.setOption(option_2, true);
                myChart_3.setOption(option_3, true);
                myChart_4.setOption(option_4, true);
            }, 1000);
        }
        this.render = function (element) {
            $(element)
                .append(htmlElement_1)
                .append(htmlElement_2)
                .append(htmlElement_3)
                .append(htmlElement_4);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            var guageData_1 = value.gauge_1;
            var guageData_2 = value.gauge_2;
            var guageData_3 = value.gauge_3;
            var guageData_4 = value.gauge_4;
            var totalAngle = 270;
            var min = 0;
            var max = 100;
            var startAngle = 225;
            var endAngle_1 = startAngle - Math.floor((parseInt(guageData_1[0].value, 10) / (max - min)) * totalAngle);
            var endAngle_2 = startAngle - Math.floor((parseInt(guageData_2[0].value, 10) / (max - min)) * totalAngle);
            var endAngle_3 = startAngle - Math.floor((parseInt(guageData_3[0].value, 10) / (max - min)) * totalAngle);
            var endAngle_4 = startAngle - Math.floor((parseInt(guageData_4[0].value, 10) / (max - min)) * totalAngle);
            option_1.series = []
            option_2.series = []
            option_3.series = []
            option_4.series = []
            option_1.series.push(
                {
                    type: 'gauge',
                    radius: "90%",
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 8,
                            color: [[1, '#293e6d']]
                        }
                    },
                    detail: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {show: false},
                    axisTick: {
                        show: false
                    },
                    splitNumber: 1,
                },
                {
                    type: 'gauge',
                    radius: "90%",
                    data: guageData_1,
                    startAngle: startAngle,
                    endAngle: endAngle_1,
                    title: {
                        textStyle: {
                            color: '#c3cad9'
                        },
                        offsetCenter: [0, '40%']
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 8,
                            color: [[1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#04c1e4'},
                                    {offset: 1, color: '#a54dff'}
                                ]
                            )]]
                        }
                    },
                    detail: {
                        textStyle: {
                            color: '#00d98b'
                        },
                        offsetCenter: [0, '-10%']
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {show: false},
                    axisTick: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    splitNumber: 1,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                }
            )
            option_2.series.push(
                {
                    type: 'gauge',
                    radius: "90%",
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 8,
                            color: [[1, '#293e6d']]
                        }
                    },
                    detail: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {show: false},
                    axisTick: {
                        show: false
                    },
                    splitNumber: 1,
                },
                {
                    type: 'gauge',
                    radius: "90%",
                    data: guageData_2,
                    startAngle: startAngle,
                    endAngle: endAngle_2,
                    title: {
                        textStyle: {
                            color: '#c3cad9'
                        },
                        offsetCenter: [0, '40%']
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 8,
                            color: [[1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#04c1e4'},
                                    {offset: 1, color: '#a54dff'}
                                ]
                            )]]
                        }
                    },
                    detail: {
                        textStyle: {
                            color: '#00d98b'
                        },
                        offsetCenter: [0, '-10%']
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {show: false},
                    axisTick: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    splitNumber: 1,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                }
            )
            option_3.series.push(
                {
                    type: 'gauge',
                    radius: "90%",
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 8,
                            color: [[1, '#293e6d']]
                        }
                    },
                    detail: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {show: false},
                    axisTick: {
                        show: false
                    },
                    splitNumber: 1,
                },
                {
                    type: 'gauge',
                    radius: "90%",
                    data: guageData_3,
                    startAngle: startAngle,
                    endAngle: endAngle_3,
                    title: {
                        textStyle: {
                            color: '#c3cad9'
                        },
                        offsetCenter: [0, '40%']
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 8,
                            color: [[1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#04c1e4'},
                                    {offset: 1, color: '#a54dff'}
                                ]
                            )]]
                        }
                    },
                    detail: {
                        textStyle: {
                            color: '#00d98b'
                        },
                        offsetCenter: [0, '-10%']
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {show: false},
                    axisTick: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    splitNumber: 1,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                }
            )
            option_4.series.push(
                {
                    type: 'gauge',
                    radius: "90%",
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 8,
                            color: [[1, '#293e6d']]
                        }
                    },
                    detail: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {show: false},
                    axisTick: {
                        show: false
                    },
                    splitNumber: 1,
                },
                {
                    type: 'gauge',
                    radius: "90%",
                    data: guageData_4,
                    startAngle: startAngle,
                    endAngle: endAngle_4,
                    title: {
                        textStyle: {
                            color: '#c3cad9'
                        },
                        offsetCenter: [0, '40%']
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 8,
                            color: [[1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#04c1e4'},
                                    {offset: 1, color: '#a54dff'}
                                ]
                            )]]
                        }
                    },
                    detail: {
                        textStyle: {
                            color: '#00d98b'
                        },
                        offsetCenter: [0, '-10%']
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {show: false},
                    axisTick: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    splitNumber: 1,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                }
            )
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        }

        this.getHeight = function () {
            return Number(3)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_AllGauge",
        "display_name": "EChartsAllGauge",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsAllGaugeWidget(settings));
        }
    });

    // 自定义组件 核心组机负载TOP
    var eChartsCoreWidget = function (settings) {
        var thisGaugeID_1 = "gauge-" + gaugeID++;
        var thisGaugeID_2 = "gauge-" + gaugeID++;
        var thisGaugeID_3 = "gauge-" + gaugeID++;
        var thisGaugeID_4 = "gauge-" + gaugeID++;
        var blueNumber_1
        var blueNumber_2
        var purpleNumber_1
        var purpleNumber_2
        var titleValue_1
        var titleValue_2
        var titleValue_3
        var titleValue_4
        var title_1 =$('<h1 class="core-title"></h1>')
        var title_2 =$('<h1 class="core-title"></h1>')
        var title_3 =$('<h1 class="core-title"></h1>')
        var title_4 =$('<h1 class="core-title"></h1>')
        var core_1 = $('<div class="custom-core" id="' + thisGaugeID_1 + '"></div>')
        var core_2 = $('<div class="custom-core" id="' + thisGaugeID_2 + '"></div>')
        var core_3 = $('<div class="custom-core" id="' + thisGaugeID_3 + '"></div>')
        var core_4 = $('<div class="custom-core" id="' + thisGaugeID_4 + '"></div>')
        var blueCircle_1 = $('<div class="core-circle blue"></div>')
        var blueCircle_2 = $('<div class="core-circle blue"></div>')
        var purpleCircle_1 = $('<div class="core-circle purple"></div>')
        var purpleCircle_2 = $('<div  class="core-circle purple"></div>')
        var htmlElement_1 = $('<div class="custom-widget" style="background: transparent"></div>');
        var htmlElement_2 = $('<div class="custom-widget" style="background: transparent"></div>');
        var htmlElement_3 = $('<div class="custom-widget" style="background: transparent"></div>');
        var htmlElement_4 = $('<div class="custom-widget" style="background: transparent"></div>');
        var currentSettings = settings;
        var option_1 = {
            title: {
                text: "",
                textStyle: {
                    color: "#59d4fc"
                }
            },
            xAxis: {
                boundaryGap: false,
                type: 'category',
                axisLabel: {
                    color: "#fff",
                    margin: 20
                },

                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                data: []
            },
            yAxis: {
                show: false,
                type: 'value',
                axisLabel: {
                    color: "#6e69b2",
                    formatter: '{value} %'
                },
                axisLine: {
                    lineStyle: {
                        color: "#1e3a71"
                    }
                },
                splitLine: {
                    show: false
                },
                max: 100
            },
            grid: {
                left: 30,
                right: 30,
                top: 10,
                bottom: 34
            },
            series: []
        };
        var option_2 = {
            title: {
                text: "",
                textStyle: {
                    color: "#59d4fc"
                }
            },
            xAxis: {
                boundaryGap: false,
                type: 'category',
                axisLabel: {
                    color: "#fff",
                    margin: 20
                },

                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                data: []
            },
            yAxis: {
                show: false,
                type: 'value',
                axisLabel: {
                    color: "#6e69b2",
                    formatter: '{value} %'
                },
                axisLine: {
                    lineStyle: {
                        color: "#1e3a71"
                    }
                },
                splitLine: {
                    show: false
                },
                max: 100
            },
            grid: {
                left: 30,
                right: 30,
                top: 10,
                bottom: 34
            },
            series: []
        };
        var option_3 = {
            title: {
                text: "",
                textStyle: {
                    color: "#59d4fc"
                }
            },
            xAxis: {
                boundaryGap: false,
                type: 'category',
                axisLabel: {
                    color: "#fff",
                    margin: 20
                },

                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                data: []
            },
            yAxis: {
                show: false,
                type: 'value',
                axisLabel: {
                    color: "#6e69b2",
                    formatter: '{value} %'
                },
                axisLine: {
                    lineStyle: {
                        color: "#1e3a71"
                    }
                },
                splitLine: {
                    show: false
                },
                max: 100
            },
            grid: {
                left: 30,
                right: 30,
                top: 10,
                bottom: 34
            },
            series: []
        };
        var option_4 = {
            title: {
                text: "",
                textStyle: {
                    color: "#59d4fc"
                }
            },
            xAxis: {
                boundaryGap: false,
                type: 'category',
                axisLabel: {
                    color: "#fff",
                    margin: 20
                },

                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                data: []
            },
            yAxis: {
                show: false,
                type: 'value',
                axisLabel: {
                    color: "#6e69b2",
                    formatter: '{value} %'
                },
                axisLine: {
                    lineStyle: {
                        color: "#1e3a71"
                    }
                },
                splitLine: {
                    show: false
                },
                max: 100
            },
            grid: {
                left: 30,
                right: 30,
                top: 10,
                bottom: 34
            },
            series: []
        };
        let creatElement = function () {
            htmlElement_1.css({
                display: "inline-block",
                width: "21%",
                margin: "40px 2% 0 2%",
                height: "320px",
                backgroundImage: 'url("img/bar-bg1.png")',
                backgroundRepeat: "no-repeat",
                backgroundPosition: "center 100%",
                backgroundSize: "100%, 100%"
            })
            htmlElement_2.css({
                display: "inline-block",
                width: "21%",
                margin: "40px 2% 0 2%",
                height: "320px",
                backgroundImage: 'url("img/bar-bg1.png")',
                backgroundRepeat: "no-repeat",
                backgroundPosition: "center 100%",
                backgroundSize: "100%, 100%"
            })
            htmlElement_3.css({
                display: "inline-block",
                width: "21%",
                margin: "40px 2% 0 2%",
                height: "320px",
                backgroundImage: 'url("img/bar-bg1.png")',
                backgroundRepeat: "no-repeat",
                backgroundPosition: "center 100%",
                backgroundSize: "100%, 100%"
            })
            htmlElement_4.css({
                display: "inline-block",
                width: "21%",
                margin: "40px 2% 0 2%",
                height: "320px",
                backgroundImage: 'url("img/bar-bg1.png")',
                backgroundRepeat: "no-repeat",
                backgroundPosition: "center 100%",
                backgroundSize: "100%, 100%"
            })
            setTimeout(function () {
                blueCircle_1.html(blueNumber_1)
                blueCircle_2.html(blueNumber_2)
                purpleCircle_1.html(purpleNumber_1)
                purpleCircle_2.html(purpleNumber_2)
                title_1.html(titleValue_1)
                title_2.html(titleValue_2)
                title_3.html(titleValue_3)
                title_4.html(titleValue_4)
                var dom_1 = document.getElementById(thisGaugeID_1);
                var dom_2 = document.getElementById(thisGaugeID_2);
                var dom_3 = document.getElementById(thisGaugeID_3);
                var dom_4 = document.getElementById(thisGaugeID_4);
                var myChart_1 = echarts.init(dom_1);
                var myChart_2 = echarts.init(dom_2);
                var myChart_3 = echarts.init(dom_3);
                var myChart_4 = echarts.init(dom_4);
                myChart_1.setOption(option_1, true);
                myChart_2.setOption(option_2, true);
                myChart_3.setOption(option_3, true);
                myChart_4.setOption(option_4, true);
            }, 1000);
        }
        this.render = function (element) {
            console.log(blueNumber_1)
            $(htmlElement_1)
                .append(title_1)
                .append(purpleCircle_1)
                .append(core_1)
            $(htmlElement_2)
                .append(title_2)
                .append(blueCircle_1)
                .append(core_2)
            $(htmlElement_3)
                .append(title_3)
                .append(purpleCircle_2)
                .append(core_3)
            $(htmlElement_4)
                .append(title_4)
                .append(blueCircle_2)
                .append(core_4)
            $(element)
                .append(htmlElement_1)
                .append(htmlElement_2)
                .append(htmlElement_3)
                .append(htmlElement_4);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            var xData = value.xData;
            var seriesData_1 = value.bar_1;
            blueNumber_1 = value.number[1]
            blueNumber_2 = value.number[3]
            purpleNumber_1 = value.number[0]
            purpleNumber_2 = value.number[2]
            titleValue_1 = value.title[0]
            titleValue_2 = value.title[1]
            titleValue_3 = value.title[2]
            titleValue_4 = value.title[3]
            option_1.xAxis.data = xData
            option_2.xAxis.data = xData
            option_3.xAxis.data = xData
            option_4.xAxis.data = xData
            option_1.series = []
            option_2.series = []
            option_3.series = []
            option_4.series = []
            option_1.series.push(
                {
                    type: 'bar',
                    barWidth: 20,
                    itemStyle: {
                        color: "#123971",
                        barBorderRadius: 2,
                    },
                    data: [100, 100, 100],
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                },
                {
                    type: 'bar',
                    barWidth: 20,
                    barGap: '-100%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#0ad0ea'},
                            {offset: 1, color: '#2066ba'}]),
                        barBorderRadius: 2,
                    },
                    data: seriesData_1,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                }
            )
            option_2.series.push(
                {
                    type: 'bar',
                    barWidth: 20,
                    itemStyle: {
                        color: "#123971",
                        barBorderRadius: 2,
                    },
                    data: [100, 100, 100],
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                },
                {
                    type: 'bar',
                    barWidth: 20,
                    barGap: '-100%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#0ad0ea'},
                            {offset: 1, color: '#2066ba'}]),
                        barBorderRadius: 2,
                    },
                    data: seriesData_1,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                }
            )
            option_3.series.push(
                {
                    type: 'bar',
                    barWidth: 20,
                    itemStyle: {
                        color: "#123971",
                        barBorderRadius: 2,
                    },
                    data: [100, 100, 100],
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                },
                {
                    type: 'bar',
                    barWidth: 20,
                    barGap: '-100%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#0ad0ea'},
                            {offset: 1, color: '#2066ba'}]),
                        barBorderRadius: 2,
                    },
                    data: seriesData_1,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                }
            )
            option_4.series.push(
                {
                    type: 'bar',
                    barWidth: 20,
                    itemStyle: {
                        color: "#123971",
                        barBorderRadius: 2,
                    },
                    data: [100, 100, 100],
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                },
                {
                    type: 'bar',
                    barWidth: 20,
                    barGap: '-100%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#0ad0ea'},
                            {offset: 1, color: '#2066ba'}]),
                        barBorderRadius: 2,
                    },
                    data: seriesData_1,
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                }
            )
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        }

        this.getHeight = function () {
            return Number(7)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "e_charts_Core",
        "display_name": "EChartsCore",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsCoreWidget(settings));
        }
    });

}());
